<script setup lang="ts">
const tabBar = [
  { link: '/home', label: '首页', icon: 'index' },
  { link: '/article', label: '健康百科', icon: 'article' },
  { link: '/notify', label: '消息中心', icon: 'notice' },
  { link: '/user', label: '我的', icon: 'mine' }
]
</script>

<template>
  <div class="layout-page">
    <div class="child-view">
      <RouterView />
    </div>
    <div class="tab-bar">
      <van-tabbar route>
        <van-tabbar-item
          :to="item.link"
          v-for="item in tabBar"
          :key="item.link"
        >
          <template #icon="{ active }">
            <cp-icon
              :name="`home-${item.icon}-${active ? 'active' : 'default'}`"
            />
          </template>
          {{ item.label }}
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-page {
  display: flex;
  flex-direction: column;
  .child-view {
    height: calc(100vh - 50px);
    overflow: auto;
  }
  .tab-bar {
    :deep(.van-tabbar) {
      .van-tabbar-item {
        &__icon {
          font-size: 21px;
        }
        &__text {
          font-size: 11px;
        }
        &:not(.van-tabbar-item--active) {
          color: var(--cp-text3);
        }
      }
    }
  }
}
</style>
